<!-- 下拉菜单 -->
<template>
	<view :id="_d.menuId" class="es-dropdown-menu">
		<view :id="_d.listId" class="es-dropdown__list">
			<view class="es-dropdown__item" v-for="(item, index) in _d.children" 
				:key="index"
				:class="{active: index == _d.activeIndex}"
				@click.stop="menuClick(index)">
				<view class="es-dropdown__text">{{item.currentText}}</view>
				<view class="es-dropdown__triangle"></view>
			</view>
		</view>
		<view v-show="_d.content.show1" class="es-dropdown__container" 
			:class="{show: _d.content.show2}"
			 @touchmove.stop.prevent="() => {}"
			 @click="maskClick()">
			 <view class="es-dropdown__content" :style="{top: _d.content.top}">
				 <view class="es-dropdown__content__popup">
				 	<slot/>
				 </view>
			 </view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed, provide, getCurrentInstance  } from 'vue'

// 获取当前组件实例
const instance = getCurrentInstance();

const emits = defineEmits(['update:modelValue', 'change']);
const props = defineProps({
	
})

function getId() {
  return Number(Math.random().toString().substr(3, 5)) + Date.now();
}

const _d = reactive({
	menuId: 'menu_'+getId(),
	listId: 'list_'+getId(),

	activeIndex: -1,
	children: [],

	// 内容弹窗
	content: {
		show1: false,
		show2: false,
		top: ''
	},
	
	// 锁
	lock: false,
})

// 注册子节点
const registerItem = (item) => {
	if(_d.children.find(bItem => bItem.id == item.id)) {
		return;
	}
	_d.children.push(item);
}

const open = () => {
	if(!(_d.content.show1 && _d.content.show2)) {
		const query = uni.createSelectorQuery().in(instance.proxy);;
		query.select(`#${_d.listId}`).boundingClientRect((rect) => {
			_d.content.top = rect.top+rect.height+'px';
			toggleContent(true);
		}).exec();
	}
}

const close = () => {
	_d.activeIndex = -1;
	toggleContent(false);
	_d.children.forEach((bItem, bIndex) => {
		bItem.active = false;
	})
}

const menuClick = (index) => {
	if(_d.lock) {
		return;
	}
	_d.lock = true;
	setTimeout(() => {
		_d.lock = false;
	}, 400);
	
	let item = _d.children[index];
	
	if(item.active) {
		close();
	} else {
		_d.activeIndex = index;
		open();
		setTimeout(() => {
			_d.children.forEach((bItem, bIndex) => {
				bItem.active = bIndex==index ? true : false;
			})
		}, 30);
	}
}

const maskClick = () => {
	close();
}

const toggleContent = (type) => {
	if(type) {
		_d.content.show1 = true;
		setTimeout(() => {
			_d.content.show2 = true;
		}, 50)
	} else {
		_d.content.show2 = false;
		setTimeout(() => {
			_d.content.show1 = false;
		}, 300)
	}
}


// 提供出去
provide('MDropDownMenu', {
  registerItem,
  toggle: (id) => {
	let idx = _d.children.findIndex(item => item.id == id);
	if(idx > 0) {
		menuClick(idx);
	}
  }
})

</script>
<style lang="scss" scoped>
.es-dropdown-menu { 
	.es-dropdown__list {
		position: relative;
		z-index: 201;
		display: flex;
		height: 80rpx;
		background: #fff;
		color: #333;
		.es-dropdown__item {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			&.active {
				color: $uni-color-primary;
			}
			.es-dropdown__text {
				
			}
			.es-dropdown__triangle {
				margin-left: 10rpx;
				width: 0;
				height: 0;
				border: 10rpx solid transparent;
				border-top-color: currentColor;
				position: relative;
				top: 5rpx;
			}
		}
	}
	.es-dropdown__container {
		position: fixed;
		z-index: 200;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		&.show {
			.es-dropdown__content {
				background: rgba(0,0,0,0.7);
			}
		}
		.es-dropdown__content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			overflow: hidden;
			background: rgba(0,0,0,0);
			transition: background .3s;
		}
		.es-dropdown__content__popup {
			position: relative;
			z-index: 2;
			height: 100%;
		}
	}
}
</style>